<template>
  <div class="process-list">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>工序管理</h2>
      <p>工序信息查询与管理</p>
    </div>

    <!-- 操作按钮 -->
    <el-card class="action-card" shadow="never">
      <div class="action-buttons">
        <el-button type="primary" @click="handleAdd" :loading="addLoading">
          <el-icon><Plus /></el-icon>
          新增工序
        </el-button>
        <el-button type="info" @click="handleProcessList">
          <el-icon><List /></el-icon>
          工艺流程列表
        </el-button>
      </div>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card" shadow="never">
      <el-table :data="tableData" v-loading="loading" stripe border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="processCode" label="工序编码" width="150" />
        <el-table-column prop="processName" label="工序名称" width="200" />
        <el-table-column prop="processTypeName" label="工序分类" width="150" />
        <el-table-column prop="user" label="负责人" width="100" />
        <el-table-column prop="deptName" label="部门" width="120" />
        <el-table-column prop="processCount" label="工序数量" width="100" />
        <el-table-column prop="state" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStateTagType(row.state)">
              {{ row.state === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isDelete" label="删除状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getIsDeleteTagType(row.isDelete)">
              {{ row.isDelete ? '已删除' : '正常' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="描述" width="150" show-overflow-tooltip />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button type="primary" size="small" @click="handleDetail(row)" class="action-btn">
                <el-icon><View /></el-icon>
                详情
              </el-button>
              <el-button type="danger" size="small" @click="handleDelete(row)" class="action-btn">
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.pageindex"
          v-model:page-size="pagination.pagesize"
          :page-sizes="[6, 10, 20, 50, 100]"
          :total="pagination.totalCount"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailVisible"
      title="工序详情"
      width="800px"
      :before-close="handleDetailClose"
    >
      <div v-if="currentDetail" class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="ID">
            <el-tag type="primary">{{ currentDetail.id }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="工序编码">
            <el-tag type="info">{{ currentDetail.processCode }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="工序名称">
            {{ currentDetail.processName }}
          </el-descriptions-item>
          <el-descriptions-item label="工序分类">
            <el-tag type="success">{{ currentDetail.processTypeName }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="负责人">
            {{ currentDetail.user }}
          </el-descriptions-item>
          <el-descriptions-item label="部门">
            {{ currentDetail.deptName }}
          </el-descriptions-item>
          <el-descriptions-item label="工序数量">
            <el-tag type="warning">{{ currentDetail.processCount }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStateTagType(currentDetail.state)">
              {{ currentDetail.state === 1 ? '启用' : '禁用' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="删除状态">
            <el-tag :type="getIsDeleteTagType(currentDetail.isDelete)">
              {{ currentDetail.isDelete ? '已删除' : '正常' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="描述" :span="2">
            {{ currentDetail.desc || '无' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleDetailClose">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新增对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="新增工序"
      width="600px"
      :before-close="handleDialogClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="工序编码" prop="ProcessCode">
          <el-input v-model="formData.ProcessCode" placeholder="请输入工序编码" />
        </el-form-item>
        <el-form-item label="工序名称" prop="ProcessName">
          <el-input v-model="formData.ProcessName" placeholder="请输入工序名称" />
        </el-form-item>
        <el-form-item label="工序分类" prop="ProcessTypeId">
          <el-select v-model="formData.ProcessTypeId" placeholder="请选择工序分类" style="width: 100%">
            <el-option
              v-for="type in processTypes"
              :key="type.id"
              :label="type.processTypeName"
              :value="type.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" prop="User">
          <el-input v-model="formData.User" placeholder="请输入负责人" />
        </el-form-item>
        <el-form-item label="部门" prop="DeptName">
          <el-input v-model="formData.DeptName" placeholder="请输入部门" />
        </el-form-item>
        <el-form-item label="状态" prop="State">
          <el-radio-group v-model="formData.State">
            <el-radio :value="1">启用</el-radio>
            <el-radio :value="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工序数量" prop="ProcessCount">
          <el-input-number v-model="formData.ProcessCount" :min="0" :max="9999" style="width: 100%" />
        </el-form-item>
        <el-form-item label="描述" prop="Desc">
          <el-input
            v-model="formData.Desc"
            type="textarea"
            :rows="3"
            placeholder="请输入描述"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleDialogClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            新增
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Delete, Plus, List } from '@element-plus/icons-vue'
import { getReadClient, getWriteClient } from '@/Urls/AxiosHelper'
import { useRouter } from 'vue-router'

// 使用正确的客户端 - 工序管理使用相对路径通过Vite代理
const r3 = getReadClient(0) // 使用相对路径，通过Vite代理到localhost:5154
const w8 = getWriteClient(0) // 使用相对路径，通过Vite代理到localhost:5070

// 路由
const router = useRouter()

// 接口类型定义
interface Process {
  id: number
  processCode: string
  processName: string
  processTypeId: number
  user: string
  deptName: string
  state: number
  processCount: number
  desc: string
  isDelete: boolean
  processTypeCode: string
  processTypeName: string
  processTypeState: number
}

interface ProcessType {
  id: number
  processTypeCode: string
  processTypeName: string
  processTypeState: number
}

interface ProcessFormData {
  ProcessCode: string
  ProcessName: string
  ProcessTypeId: number | null
  User: string
  DeptName: string
  State: number
  ProcessCount: number
  Desc: string
}

interface ApiResponse {
  data: {
    totalCount: number
    totalPage: number
    data: Process[]
  }
  code: number
  message: string
}

// 响应式数据
const loading = ref(false)
const tableData = ref<Process[]>([])

// 详情相关
const detailVisible = ref(false)
const currentDetail = ref<Process | null>(null)

// 新增相关
const dialogVisible = ref(false)
const addLoading = ref(false)
const submitLoading = ref(false)
const formRef = ref()

// 工序分类数据
const processTypes = ref<ProcessType[]>([])

// 表单数据
const formData = reactive<ProcessFormData>({
  ProcessCode: '',
  ProcessName: '',
  ProcessTypeId: null,
  User: '',
  DeptName: '',
  State: 1,
  ProcessCount: 0,
  Desc: ''
})

// 表单验证规则
const formRules = {
  ProcessCode: [
    { required: true, message: '请输入工序编码', trigger: 'blur' }
  ],
  ProcessName: [
    { required: true, message: '请输入工序名称', trigger: 'blur' }
  ],
  ProcessTypeId: [
    { required: true, message: '请选择工序分类', trigger: 'change' }
  ],
  User: [
    { required: true, message: '请输入负责人', trigger: 'blur' }
  ],
  DeptName: [
    { required: true, message: '请输入部门', trigger: 'blur' }
  ],
  ProcessCount: [
    { required: true, message: '请输入工序数量', trigger: 'blur' }
  ]
}

// 分页数据
const pagination = reactive({
  pageindex: 1,
  pagesize: 6,
  totalCount: 0,
  totalPage: 0
})

// 获取工序分类列表
const fetchProcessTypes = async () => {
  try {
    const response = await r3.get('/sellreadapi/api/Processs/processtypelist', {
      params: { pageindex: 1, pagesize: 100 }
    })
    
    if (response.data.code === 200) {
      processTypes.value = response.data.data.data
    } else {
      console.log('获取工序分类失败，使用模拟数据')
      // 模拟数据
      processTypes.value = [
        { id: 1, processTypeCode: 'FC-001', processTypeName: '无聊终结装备', processTypeState: 1 },
        { id: 2, processTypeCode: 'FC-002', processTypeName: '自动化懒人装备', processTypeState: 1 },
        { id: 3, processTypeCode: 'FC-003', processTypeName: '智能生产装备', processTypeState: 1 }
      ]
    }
  } catch (error) {
    console.log('获取工序分类失败，使用模拟数据:', error)
    // 模拟数据
    processTypes.value = [
      { id: 1, processTypeCode: 'FC-001', processTypeName: '无聊终结装备', processTypeState: 1 },
      { id: 2, processTypeCode: 'FC-002', processTypeName: '自动化懒人装备', processTypeState: 1 },
      { id: 3, processTypeCode: 'FC-003', processTypeName: '智能生产装备', processTypeState: 1 }
    ]
  }
}

// 获取工序列表数据
const fetchProcessList = async () => {
  try {
    loading.value = true
    
    const params = {
      pageindex: pagination.pageindex,
      pagesize: pagination.pagesize
    }

    console.log('API请求参数:', params)
    console.log('使用的客户端:', r3.defaults.baseURL)
    
    const response = await r3.get<ApiResponse>('/sellreadapi/api/Processs/Processslist', { params })
    
    if (response.data.code === 200) {
      tableData.value = response.data.data.data
      pagination.totalCount = response.data.data.totalCount
      pagination.totalPage = response.data.data.totalPage
      console.log('获取到的数据:', tableData.value)
    } else {
      ElMessage.error(response.data.message || '获取工序列表失败')
    }
  } catch (error: any) {
    console.error('获取工序列表失败:', error)
    ElMessage.error(`网络请求失败: ${error.message}`)
    // 添加模拟数据
    tableData.value = [
      {
        id: 1,
        processCode: 'GJ-001',
        processName: '香蕉自动削皮工序',
        processTypeId: 1,
        user: '李娜',
        deptName: '生产部',
        state: 1,
        processCount: 20,
        desc: '无',
        isDelete: false,
        processTypeCode: 'FC-001',
        processTypeName: '无聊终结装备',
        processTypeState: 1
      },
      {
        id: 2,
        processCode: 'GJ-002',
        processName: '苹果自动清洗工序',
        processTypeId: 2,
        user: '张三',
        deptName: '生产部',
        state: 1,
        processCount: 15,
        desc: '自动化清洗流程',
        isDelete: false,
        processTypeCode: 'FC-002',
        processTypeName: '自动化懒人装备',
        processTypeState: 1
      }
    ]
    pagination.totalCount = 2
    pagination.totalPage = 1
  } finally {
    loading.value = false
  }
}

// 分页大小改变
const handleSizeChange = (val: number) => {
  pagination.pagesize = val
  pagination.pageindex = 1
  fetchProcessList()
}

// 当前页改变
const handleCurrentChange = (val: number) => {
  pagination.pageindex = val
  fetchProcessList()
}

// 删除工序
const handleDelete = async (row: Process) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除工序 "${row.processName}" 吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const response = await r3.get('/sellwriteapi/api/Pro/ProDel', {
      params: { Id: row.id }
    })
    
    if (response.data.Code === 200) {
      ElMessage.success('工序删除成功')
      fetchProcessList()
    } else {
      ElMessage.error(response.data.Message || '删除失败')
    }
  } catch (error: any) {
    if (error.message === 'cancel') {
      ElMessage.info('已取消删除')
    } else {
      console.error('删除工序失败:', error)
      ElMessage.error(`删除失败: ${error.message || '请检查网络或后端服务'}`)
    }
  }
}

// 查看详情
const handleDetail = (row: Process) => {
  currentDetail.value = row
  detailVisible.value = true
}


// 关闭详情对话框
const handleDetailClose = () => {
  detailVisible.value = false
  currentDetail.value = null
}

// 新增工序
const handleAdd = async () => {
  resetForm()
  dialogVisible.value = true
  // 自动生成编码
  await generateProcessCode()
}

// 工艺流程列表
const handleProcessList = () => {
  router.push('/proflowlist')
}

// 生成工序编码
const generateProcessCode = async () => {
  try {
    // 获取所有工序数据来确保编码唯一性
    const response = await r3.get('/sellreadapi/api/Processs/Processslist', {
      params: { pageindex: 1, pagesize: 1000 } // 获取大量数据确保找到最大编码
    })
    
    let maxCode = 0
    if (response.data.code === 200 && response.data.data.data.length > 0) {
      // 从现有数据中提取最大编码
      const existingCodes = response.data.data.data.map((item: Process) => {
        const match = item.processCode.match(/GJ-(\d+)/)
        return match ? parseInt(match[1]) : 0
      })
      maxCode = Math.max(...existingCodes)
    }
    
    // 生成新编码
    const newCode = `GJ-${String(maxCode + 1).padStart(3, '0')}`
    formData.ProcessCode = newCode
  } catch (error: any) {
    console.error('生成工序编码失败:', error)
    // 使用时间戳生成编码
    const timestamp = Date.now().toString().slice(-6)
    const newCode = `GJ-${timestamp}`
    formData.ProcessCode = newCode
  }
}

// 重置表单
const resetForm = () => {
  formData.ProcessCode = ''
  formData.ProcessName = ''
  formData.ProcessTypeId = null
  formData.User = ''
  formData.DeptName = ''
  formData.State = 1
  formData.ProcessCount = 0
  formData.Desc = ''
  
  // 清除验证
  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

// 关闭对话框
const handleDialogClose = () => {
  dialogVisible.value = false
  resetForm()
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitLoading.value = true
    
    // 新增模式
    const response = await w8.post('/sellwriteapi/api/Pro/ProAdd', formData)
    
    if (response.data.Code === 200) {
      ElMessage.success('工序添加成功')
      dialogVisible.value = false
      resetForm()
      fetchProcessList()
    } else {
      ElMessage.error(response.data.Message || '添加失败')
    }
  } catch (error: any) {
    console.error('操作失败:', error)
    console.error('错误类型:', error.name)
    console.error('错误消息:', error.message)
    console.error('错误代码:', error.code)
    
    if (error.response) {
      console.error('响应状态:', error.response.status)
      console.error('响应数据:', error.response.data)
      console.error('响应头:', error.response.headers)
    }
    
    // 更详细的错误信息
    let errorMessage = '添加失败: '
    
    if (error.response) {
      // 服务器响应了错误状态码
      const status = error.response.status
      const data = error.response.data
      
      if (status === 400) {
        errorMessage += '请求参数错误'
        if (data && data.errors) {
          errorMessage += `: ${JSON.stringify(data.errors)}`
        }
      } else if (status === 500) {
        errorMessage += '服务器内部错误'
        if (data && data.includes('Duplicate entry')) {
          errorMessage += ': 工序编码已存在'
        }
      } else {
        errorMessage += `服务器错误 (${status}): ${data || error.message}`
      }
    } else if (error.request) {
      // 请求已发出但没有收到响应
      errorMessage += '网络错误，请检查网络连接'
    } else {
      // 其他错误
      errorMessage += error.message || '未知错误'
    }
    
    ElMessage.error(errorMessage)
  } finally {
    submitLoading.value = false
  }
}

// 获取状态标签样式
const getStateTagType = (state: number) => {
  return state === 1 ? 'success' : 'danger'
}

// 获取删除状态标签样式
const getIsDeleteTagType = (isDelete: boolean) => {
  return isDelete ? 'danger' : 'success'
}

// 组件挂载时获取数据
onMounted(() => {
  console.log('组件挂载，开始获取数据...')
  console.log('使用的客户端基础URL:', r3.defaults.baseURL)
  fetchProcessTypes()
  fetchProcessList()
})
</script>

<style scoped>
.process-list {
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #e4e7ed;
}

.page-header h2 {
  margin: 0 0 4px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 13px;
}

.table-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pagination-container {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

/* 表格样式优化 */
:deep(.el-table) {
  font-size: 13px;
  border-radius: 6px;
  overflow: hidden;
}

:deep(.el-table th) {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%);
  color: #606266;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 0;
  border: none;
}

:deep(.el-table td) {
  padding: 8px 0;
  border-bottom: 1px solid #f0f2f5;
}

:deep(.el-table tbody tr:hover) {
  background-color: #f8f9fa;
}

:deep(.el-table tbody tr:last-child td) {
  border-bottom: none;
}

/* 按钮样式 */
:deep(.el-button) {
  border-radius: 4px;
}

:deep(.el-button + .el-button) {
  margin-left: 8px;
}

/* 卡片样式 */
:deep(.el-card) {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

:deep(.el-card:hover) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-card__body) {
  padding: 16px;
}

/* 详情页面样式 */
.detail-content {
  padding: 16px 0;
}

:deep(.el-descriptions) {
  margin-top: 20px;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
  background-color: #f5f7fa;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-tag) {
  font-weight: 500;
}

.dialog-footer {
  text-align: right;
}

/* 详情对话框样式 */
:deep(.el-dialog) {
  border-radius: 8px;
}

:deep(.el-dialog__header) {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  border-radius: 8px 8px 0 0;
  padding: 20px 24px;
}

:deep(.el-dialog__title) {
  font-weight: 600;
  color: #303133;
}

:deep(.el-dialog__body) {
  padding: 24px;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid #ebeef5;
  background-color: #fafafa;
  border-radius: 0 0 8px 8px;
}

/* 对话框按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.dialog-footer .el-button) {
  border-radius: 4px;
  padding: 8px 20px;
}

/* 操作按钮美化样式 */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 2px 0;
}

.action-btn {
  width: 65px;
  height: 26px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  padding: 0 6px;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.action-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 详情按钮样式 */
.action-btn.el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border: none;
  color: white;
}

.action-btn.el-button--primary:hover {
  background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
}


/* 删除按钮样式 */
.action-btn.el-button--danger {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
  border: none;
  color: white;
}

.action-btn.el-button--danger:hover {
  background: linear-gradient(135deg, #f78989 0%, #f56c6c 100%);
}

/* 按钮图标样式 */
.action-btn .el-icon {
  margin-right: 3px;
  font-size: 12px;
}

/* 表格操作列样式优化 */
:deep(.el-table .el-table__cell) {
  padding: 8px 0;
}

:deep(.el-table .el-table__cell:last-child) {
  background-color: #fafbfc;
}

/* 分页组件样式优化 */
:deep(.el-pagination) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

:deep(.el-pagination .el-pagination__total) {
  color: #606266;
  font-weight: 500;
}

:deep(.el-pagination .el-pager li) {
  border-radius: 4px;
  transition: all 0.3s ease;
  min-width: 28px;
  height: 28px;
  line-height: 28px;
}

:deep(.el-pagination .el-pager li:hover) {
  background-color: #f5f7fa;
  color: #409eff;
}

:deep(.el-pagination .el-pager li.is-active) {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  color: white;
  border: none;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
  border-radius: 4px;
  transition: all 0.3s ease;
  min-width: 28px;
  height: 28px;
}

:deep(.el-pagination .btn-prev:hover),
:deep(.el-pagination .btn-next:hover) {
  background-color: #f5f7fa;
  color: #409eff;
}

/* 操作按钮区域样式 */
.action-card {
  margin-bottom: 16px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 新增按钮样式 */
.action-buttons .el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border: none;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.action-buttons .el-button--primary:hover {
  background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
}

.action-buttons .el-button--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

/* 工艺流程列表按钮样式 */
.action-buttons .el-button--info {
  background: linear-gradient(135deg, #909399 0%, #b1b3b8 100%);
  border: none;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(144, 147, 153, 0.3);
}

.action-buttons .el-button--info:hover {
  background: linear-gradient(135deg, #b1b3b8 0%, #909399 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(144, 147, 153, 0.4);
}

.action-buttons .el-button--info:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(144, 147, 153, 0.3);
}

/* 表单样式优化 */
:deep(.el-form-item__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-input__inner) {
  border-radius: 6px;
  transition: all 0.3s ease;
}

:deep(.el-input__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

:deep(.el-select .el-input__inner) {
  border-radius: 6px;
}

:deep(.el-textarea__inner) {
  border-radius: 6px;
  transition: all 0.3s ease;
}

:deep(.el-textarea__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

:deep(.el-radio-group) {
  display: flex;
  gap: 16px;
}

:deep(.el-radio) {
  margin-right: 0;
}

:deep(.el-radio__label) {
  font-weight: 500;
  color: #606266;
}

/* 对话框样式优化 */
:deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%);
  border-bottom: 1px solid #e4e7ed;
  padding: 20px 24px;
}

:deep(.el-dialog__title) {
  font-weight: 600;
  color: #303133;
  font-size: 18px;
}

:deep(.el-dialog__body) {
  padding: 24px;
  background-color: #fafbfc;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  background-color: #f5f7fa;
  border-top: 1px solid #e4e7ed;
}

/* 对话框按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.dialog-footer .el-button) {
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.dialog-footer .el-button--primary) {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border: none;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

:deep(.dialog-footer .el-button--primary:hover) {
  background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
}


/* 只读输入框样式 */
:deep(.el-input.is-disabled .el-input__inner) {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}

:deep(.el-input.is-disabled .el-input__inner:focus) {
  border-color: #e4e7ed;
  box-shadow: none;
}
</style>

